/*
 * @Description: 预约结果
 * @Author: shuaishuai.wang
 * @Date: 2019-07-10 17:47:29
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-07-18 10:41:09
 */
<template>
  <div class="main">
    <title-bar
      titleText='预约成功'
      :needBack='false'
    ></title-bar>
    <div>
      <div class="result">
        <img :src="result.icon" />
        <p class="msg">{{result.msg}}</p>
        <p class="info">{{result.info}}</p>
      </div>
      <div
        class="btn_area success_btn"
        v-if="result.state"
      >
        <button
          class="fontsize32"
          @click="goToIndex(1)"
        >查看预约记录</button>
        <button
          class="go_home fontsize32"
          @click="goToIndex(0)"
        >完成</button>
      </div>
      <div
        class="btn_area failed_btn"
        v-else
      >
        <button>重试</button>
        <button class="go_home">回首页</button>
      </div>
    </div>

  </div>
</template>

<script>
import { TitleBar } from 'vue-xb-ui-depot'
import { getUrlParams } from 'vue-xiaobu-utils'
export default {
  components: {
    TitleBar
  },
  data() {
    return {
      result: { // 预约结果数据存储，根据不同状态改为不同内容
        icon: require('./assets/success.png'), // 图标路径
        msg: '预约成功', // 预约文字结果
        info: getUrlParams().time, // 提示信息
        state: true // 预约布尔结果，用于选择底部按钮
      },
      jumpUrl: window.prodInApp ? 'city-app/' : ''
    }
  },
  destroyed() {
    window.removeEventListener('popstate', () => { }, false) // false阻止默认事件
  },
  methods: {
    goToIndex(index) { // 跳转至车检主页
      window.location.href = 'vehicleIndex.html?_tv=false&_rv=false&type=' + index
    }
  }
}
</script>

<style lang='scss' scoped>
@import './../common.scss';
.main {
  height: 100%;
  position: relative;
  background-color: $bgColorDiv;
  min-height: fill-available;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px; /*no*/
  .result {
    text-align: center;
    img {
      width: 240px;
      height: 240px;
      margin: 64px auto;
    }
    .msg {
      height: 66px;
      font-size: 24px; /*no*/
      color: $themeColors;
      line-height: 66px;
      margin-bottom: 16px;
    }
    .info {
      height: 44px;
      color: $fontColorSecond;
      line-height: 44px;
    }
  }
  .btn_area {
    position: fixed;
    bottom: 194px;
    button {
      width: 682px;
      height: 72px;
      border-radius: 25px; /*no*/
      color: $fontColorWhite;
      border: 1px solid $btnColor; /*no*/
      background-color: $themeColors;
      margin: 16px 32px;
    }
    .go_home {
      background-color: #fff;
      color: $btnColor;
    }
  }
}
</style>
